<template>
    <div class="hello">
        <div>
            <h2>欢迎光临呱呱的小店</h2>
            <div>请选择你喜欢的服务员</div>
        </div>
        <div>
            <button
                v-for="(item, index) in girls"
                :key="index"
                @click="girlsnumFun(index)"
            >
                {{ item }}
            </button>
        </div>
        <div>当前选择的是 【{{ girlsnum }}】</div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from "vue";
export default defineComponent({
    name: "Hello",
    setup (prop) {
        console.log(prop);
        const activeIndex = ref(-1);
        const girls = ref(["服务员1", "服务员2", "服务员3"]);
        const girlsnum = ref("");
        const girlsnumFun = (item: number) => {
            activeIndex.value = item;
        };
        watch(activeIndex, (newValue, oldValue) => {
            console.log(newValue, oldValue);
            girlsnum.value = girls.value[newValue];
        });
        return {
            girls,
            girlsnum,
            girlsnumFun,
        };
    },
});
</script>
